import React from 'react';
import {inject, observer} from 'mobx-react';
import {Carousel} from 'antd';
import {getLoginBgImageStyle} from '../../../util/loginUtil';

import './css/';
import E9MultiLang from './E9MultiLang';
import E9Form from './E9Form';
import E9QRCode from './E9QRCode';
import E9BgImageBox from './E9BgImageBox';
import E9Custom from './E9Custom';
import {WeaLocaleProvider} from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;
@inject('portalLoginStore')
@observer
class E9Login extends React.Component {
    constructor(props) {
        super(props)
    }

    componentDidMount() {
        const {portalLoginStore} = this.props;
        portalLoginStore.onWindowResize();
    }

    render() {
        const {portalLoginStore} = this.props;
        const {state, setState, setStateAndCache, getElementStyle} = portalLoginStore;
        const {
            win_width,
            win_height,
            bgImagesInfo = [],
            loginSettingInfo = {},
            loginType,
            loginFormItems,
            initialSlide,
            autoCarousel,
            carouselTime
        } = state;
        const {loginInfo, loginForm, qrcode} = loginSettingInfo;
        const {bgType = 'img', videosrc, videowidth = 1920, videoheight = 1080, bgColor, bgOpacity, showQrcode, showBgImageBox} = loginInfo;

        let bgImageComp = <div/>;
        if (bgType == 'img') {
            if (autoCarousel && bgImagesInfo.length > 1) {
                bgImageComp = (
                    <Carousel
                        key={carouselTime}
                        autoplay={true}
                        dots={false}
                        fade={true}
                        speed={800}
                        autoplaySpeed={carouselTime * 1000}
                        initialSlide={initialSlide}
                        afterChange={current => setState({initialSlide: current < 0 ? 0 : current})}
                    >
                        {
                            bgImagesInfo.map(item => {
                                return (
                                    <img
                                        src={item.imgsrc}
                                        alt=""
                                        style={{width: win_width < 800 ? 800 : win_width, height: win_height < 712 ? 712 : win_height}}
                                    />
                                );
                            })
                        }
                    </Carousel>
                )
            } else {
                bgImageComp = <div className='e9login-bg-image' style={getLoginBgImageStyle(loginInfo)}/>;
            }
        } else if (bgType == 'video' && videosrc) {
            let o = win_width < 800 ? 800 : win_width;
            let r = win_height < 712 ? 712 : win_height;
            let s = o;
            let l = o * videoheight / videowidth;
            if (r > l) {
                l = r;
                s = r * videowidth / videoheight;
            }
            let p = l - r;
            let u = s - o;
            let c = -(Math.abs(p) / 2);
            let d = -(Math.abs(u) / 2);
            const style = {
                position: "absolute",
                width: s + "px",
                height: l + "px",
                top: c + "px",
                left: d + "px"
            };
            bgImageComp = (
                <video muted autoPlay loop style={style}>
                    <source src={videosrc} type="video/mp4"/>
                </video>
            );
        }

        return (
            <div id="LoginContainer" className="e9login-container" onClick={() => setState({multiLangVisible: false})}>
                <div className="e9login-content">
                    {
                        showQrcode ? (
                                <div className='e9login-qrcode e9login-element' style={{color: qrcode.color, ...getElementStyle(qrcode)}}>
                                    {loginType == 'form' ? <i className="icon-coms-Scan" title={getLabel(390755,'扫码登录')} onClick={() => setStateAndCache('loginType', 'QRCode')}/> : <i className="icon-coms-Revoke2" title={getLabel(1290,'返回')} onClick={() => setStateAndCache('loginType', 'form')}/>}
                                </div>
                            ) : ''
                    }
                    <div className='e9login-form-box e9login-element' style={getElementStyle(loginForm)}>
                        <E9MultiLang/>
                        {loginType == 'form' ? <E9Form/> : <E9QRCode/>}
                    </div>
                    <div className="e9login-bg-color" style={{backgroundColor: bgColor, opacity: bgOpacity}}></div>
                    {bgImageComp}
                    {bgType == 'img' && showBgImageBox ? <E9BgImageBox/> : ''}
                    <E9Custom/>
                </div>
            </div>
        );
    }
}

export default E9Login;
